<template>
  <div id="setbanner">
    <!-- <fieldset class="layui-elem-field layui-field-title">
      <legend>页头类型</legend>
      <div class="layui-field-box">
        <el-radio-group v-model="radio" @change="changetype">
          <el-radio-button label="背景+文字"></el-radio-button>
          <el-radio-button label="使用图片"></el-radio-button>
        </el-radio-group>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>上传LOGO</legend>
      <div class="logobox">
        <img :src="themeConfig.LogoSrc" alt="">
      </div>
      <el-button id="uploaderlogo" type="primary">点击上传</el-button>
    </fieldset> -->
    <fieldset class="layui-elem-field layui-field-title">
      <legend>选择海报轮播图</legend>
      <div class="theme" v-for="(item,index) in themeConfig.background" :key="item">
        <img :src="item" style="width:100%;height:100%;">
        <el-button size="mini" class="reup" @click="reup(index)">重新上传</el-button>
        <el-button size="mini" class="del" type="danger" @click="del(index)" plain :disabled="themeConfig.background.length<=1">删除</el-button>
      </div>
      <el-button id="uploader" @click="addimg" plain :disabled="themeConfig.background.length>=5">添加背景图</el-button>
      <p class="note">提示：请上传1880*542或同比例背景图,最多可添加5张背景图</p>
    </fieldset>
    <el-button @click="save" type="primary">保存</el-button>
    <el-button @click="cancel">取消</el-button>
    <!-- <transition name="fade">
      <div class="callsponsor" v-show="choseback">
        <transition name="move">
          <div class="box" v-show="choseback">
            <p>图库</p>
            <i class="el-message-box__close el-icon-close close" @click="chosebg(false)"></i>
            <div class="content">
              <ul>
                <li class="bgimg" v-for="(img,index) in imgList" :key="img" :style="{backgroundImage: tourl[index]}" @click="handlebg(img)">
                  <div class="cover" v-show="img == chosenimg">
                    <i class="el-icon-check"></i>
                    当前选择
                  </div>
                </li>
              </ul>
            </div>
            <div class="bottombox">
              <el-button @click="chosebg(false)">取消</el-button>
              <el-button @click="submit" type="primary">确定</el-button>
            </div>
          </div>
        </transition>
      </div>
    </transition> -->
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    // props: ["bandata"],
    data: function () {
      return {

      }
    },
    mounted() {
      // var that = this;
      // window.fileUploader.create("#uploader", {
      //   callback: function (dataUrls) {
      //     that.setThemeConfig({
      //       theme: that.themeName,
      //       key: 'background',
      //       value: dataUrls[0]
      //     });
      //     that.setThemeConfig({
      //       theme: that.themeName,
      //       key: 'uploadimg',
      //       value: dataUrls[0]
      //     })
      //     that.upimg = dataUrls[0];
      //   }
      // });
    },
    computed: {
      ...mapState([
        "pageConfig",
      ]),
      themeConfig() {
        return this.pageConfig[this.pageConfig.theme]
      },
      themeName() {
        return this.pageConfig.theme
      },
      // backimg() {
      //   return 'url(' + this.themeConfig.background + ')'
      // },
      // tourl() {
      //   var list = [];
      //   this.imgList.forEach(function (item) {
      //     list.push('url(' + item + ')')
      //   })
      //   return list;
      // }
    },
    methods: {
      ...mapMutations([
        'setThemeConfig',
        'cancelEdit'
      ]),
      addimg() {
        var that = this;
        window.fileUploader.create("#uploader", {
          mode: "single",
          rightNow: "true",
          callback: function (dataUrls) {
            var bg = that.themeConfig.background;
            bg.push(dataUrls[0]);
            that.setThemeConfig({
              theme: that.themeName,
              key: 'background',
              value: bg
            });
          }
        });
      },
      reup(index) {
        var that = this;
        window.fileUploader.create("#uploader", {
          mode: "single",
          rightNow: "true",
          callback: function (dataUrls) {
            var bg = that.themeConfig.background;
            bg.splice(index, 1, dataUrls[0]);
            that.setThemeConfig({
              theme: that.themeName,
              key: 'background',
              value: bg
            });
          }
        });
      },
      del(index) {
        var that = this;
        var bg = that.themeConfig.background;
        bg.splice(index, 1);
        that.setThemeConfig({
          theme: that.themeName,
          key: 'background',
          value: bg
        });
      },
      cancel: function () {
        this.cancelEdit();
      },
      save: function () {
        this.$store.dispatch('save')
      }
    }
  }
</script>

<style scoped lang="less">
  // .upimgbox {
  //   width: 40px;
  //   height: 40px;
  //   border: 1px solid #999;
  //   line-height: 40px;
  //   margin-bottom: 10px;
  // }
  // .upimg {
  //   vertical-align: middle;
  //   width: 40px;
  // }
  // .active {
  //   border: 3px solid #20a0ff;
  // }
  .theme {
    width: 280px;
    height: 93px;
    border: 1px solid #999;
    margin: 10px 0;
    position: relative;
  } // .logobox {
  //   margin: 10px 0 15px;
  //   img {
  //     height: 37px;
  //   }
  // }
  // .callsponsor {
  //   background: rgba(0, 0, 0, .5);
  //   transition: width 0.5s;
  //   position: fixed;
  //   top: 0;
  //   bottom: 0;
  //   left: 0;
  //   right: 0;
  //   text-align: center;
  //   z-index: 2001;
  //   .box {
  //     text-align: left;
  //     display: inline-block;
  //     vertical-align: middle;
  //     background-color: #fff;
  //     width: 650px;
  //     border-radius: 3px;
  //     font-size: 16px;
  //     overflow: hidden;
  //     -webkit-backface-visibility: hidden;
  //     backface-visibility: hidden;
  //     background: #fff;
  //     position: relative;
  //     p {
  //       padding: 20px 20px 0;
  //     }
  //     .content {
  //       padding: 20px;
  //       .icon-box {
  //         margin: 5px;
  //         .iconset {
  //           transition: all .4s;
  //         }
  //         .iconset:hover {
  //           transform: translateY(-2%);
  //           box-shadow: 1px 4px 10px 2px #CCC;
  //           -webkit-box-shadow: 1px 4px 10px 2px #CCC;
  //           -moz-box-shadow: 1px 4px 10px 2px #CCC;
  //         }
  //       }
  //     }
  //     .bottombox {
  //       padding: 10px 20px 15px;
  //       text-align: right;
  //     }
  //   }
  //   .close {
  //     position: absolute;
  //     top: 19px;
  //     right: 20px;
  //     font-size: 13px;
  //     color: #999;
  //   }
  // }
  // .callsponsor:after {
  //   content: "";
  //   display: inline-block;
  //   height: 100%;
  //   width: 0;
  //   vertical-align: middle;
  // }
  // .cover {
  //   display: inline-block;
  //   position: absolute;
  //   left: 0;
  //   right: 0;
  //   top: 0;
  //   bottom: 0;
  //   background: rgba(0, 0, 0, 0.8);
  //   color: #fff;
  //   font-size: 14px;
  //   text-align: center;
  //   i {
  //     font-size: 40px;
  //     display: block;
  //     margin: 0;
  //     margin-top: 20px;
  //     margin-bottom: 5px;
  //   }
  // }
  // .bgimg {
  //   display: inline-block;
  //   width: 190px;
  //   height: 100px;
  //   border: 1px solid #999;
  //   margin: 10px 5px;
  //   background-size: cover;
  //   background-position: center;
  //   background-repeat: no-repeat;
  //   position: relative;
  //   cursor: pointer;
  // }
  .note {
    color: #20a0ff;
    margin-top: 10px;
  }

  .reup {
    position: absolute;
    top: 8px;
    right: 15px;
  }

  .del {
    position: absolute;
    top: 43px;
    right: 15px;
  } // .fade-enter-active,
  // .fade-leave-active,
  // .move-enter-active,
  // .move-leave-active {
  //   transition: all .4s
  // }
  // .fade-enter,
  // .fade-leave-to {
  //   opacity: 0
  // }
  // .move-enter,
  // .move-leave-to {
  //   transform: translateY(-20px);
  // }
</style>